<template>
  <view class="consultBox">
    <view class="consultItem" v-for="(item, index) in consultList" :key="index">
      <view class="leftText">
        <view class="title">
          {{ item.title }}
        </view>
        <view class="text">
          <text>{{ item.time }}{{ item.time }}</text>
          <text>{{ item.num }}</text>
        </view>
      </view>
      <view class="rightImg">
        <image :src="item.imgUrl" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      consultList: [
        {
          imgUrl: "/static/community/pic@2x (2).png",
          title: "避坑消费陷阱：猫猫狗狗的日常生活不得不说的事",
          time: "2小时前",
          author: " • 李尾鱼是个好鱼",
          num: "97个回复",
        },
        {
          imgUrl: "/static/community/pic@2x (2).png",
          title: "避坑消费陷阱：猫猫狗狗的日常生活不得不说的事",
          time: "2小时前",
          author: " • 李尾鱼是个好鱼",
          num: "97个回复",
        },
        {
          imgUrl: "/static/community/pic@2x (2).png",
          title: "避坑消费陷阱：猫猫狗狗的日常生活不得不说的事",
          time: "2小时前",
          author: " • 李尾鱼是个好鱼",
          num: "97个回复",
        },
        {
          imgUrl: "/static/community/pic@2x (2).png",
          title: "避坑消费陷阱：猫猫狗狗的日常生活不得不说的事",
          time: "2小时前",
          author: " • 李尾鱼是个好鱼",
          num: "97个回复",
        },
        {
          imgUrl: "/static/community/pic@2x (2).png",
          title: "避坑消费陷阱：猫猫狗狗的日常生活不得不说的事",
          time: "2小时前",
          author: " • 李尾鱼是个好鱼",
          num: "97个回复",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.consultItem {
  width: 100%;
  height: 168rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  justify-content: space-between;
  gap: 34rpx;
  margin-bottom: 16rpx;

  .leftText {
    padding: 16rpx;

    .title {
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
    }

    .text {
      font-weight: 500;
      font-size: 20rpx;
      color: #303030;
      margin-top: 32rpx;
      line-height: 32rpx;
      display: flex;
      justify-content: space-between;
    }
  }

  .rightImg {
    width: 510rpx;
    height: 168rpx;
    border-radius: 0rpx 16rpx 16rpx 0rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
